<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标练习与CSS三角</title>
    <style>
        /*字体图标声明*/
        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?cmt4ai');
            src: url('../fonts/icomoon.eot?cmt4ai#iefix') format('embedded-opentype'),
            url('../fonts/icomoon.ttf?cmt4ai') format('truetype'),
            url('../fonts/icomoon.woff?cmt4ai') format('woff'),
            url('../fonts/icomoon.svg?cmt4ai#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 50px;
            color: red;
        }

        .box1 {
            width: 0;
            height: 0;
            border: 10px solid #f7b84f;
        }
        .box2{
            margin: 50px auto;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: #00a4ff;
        }

        .box3{
            position: relative;
            margin: 10px auto;
            width: 150px;
            height: 50px;
            background-color: #91d5ff;
        }
        .box3 span {
            position: absolute;
            top: -20px;
            left: 14px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: #91d5ff;
        }

        input, textarea {
            /*取消轮廓线*/
            outline: none;
        }

        textarea {
            resize: none;
        }

    </style>
</head>
<body>
<span></span>
<div class="box1">
</div>
<div class="box2"></div>
</body>

<div class="box3">
<span></span>
</div>

<ul>
    <li style="cursor: default">默认鼠标样式</li>
    <li style="cursor: pointer">小手样式</li>
    <li style="cursor: move">移动样式</li>
    <li style="cursor: text">文本样式</li>
    <li style="cursor: not-allowed">禁止样式</li>
</ul>

<input type="text">
<textarea name="" id="" color="30" rows="10"></textarea>

</html>